<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="javatime" uri="http://sargue.net/jsptags/time" %>
<%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
    <meta charset="UTF-8">
    <title>跳蚤-搜索</title>

    <jsp:include page="${ctx}/page/common/css.jsp"/>


    <style>
        img.p-img {
            width: 240px;
            height: 240px;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
<jsp:include page="${ctx}/page/common/header.jsp"/>

<div class="container pt-4 pb-4">
    <ul class="list-unstyled">
        <c:forEach items="${productPage.content}" var="p">
            <li class="media mb-2">
                <img src="../img/wajueji.png" class="p-img mr-3 img-thumbnail rounded" alt="...">
                <div class="media-body">
                    <h4 class="mt-0 mb-1">${p.name}</h4>
                    <p class="font-weight-light mt-1">${p.desc}</p>
                    <p>
                        <strong class="text-danger">￥<fmt:formatNumber value="${p.currentPrice}"
                                                                       pattern="0.00"/></strong>
                        <del class="text-muted">￥<fmt:formatNumber value="${p.originalPrice}" pattern="0.00"/></del>
                    </p>

                    <c:choose>
                        <c:when test="${empty userSession}">
                            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                                    title="登录后才能购买">
                                购买
                            </button>
                        </c:when>
                        <c:otherwise>
                            <button class="btn btn-danger" onclick="buy('${p.id}')" data-toggle="tooltip"
                                    data-placement="top" title="点击购买">购买
                            </button>
                        </c:otherwise>
                    </c:choose>
                    <p class="card-text"><small class="text-muted">发布于 <javatime:format value="${p.createTime}"
                                                                                        pattern="yyyy-MM-dd HH:mm:ss"/></small>
                    </p>
                </div>
            </li>
        </c:forEach>
    </ul>
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <pg:pager url="${ctx}/products" items="${productPage.totalElements }"
                      export="currentPageNumber=pageNumber">
                <pg:param name="key" value="${key}"/>
                <!-- 首页 -->
                <pg:first>
                    <li class="page-item"><a class="page-link" href="${pageUrl}">首页</a></li>
                </pg:first>
                <pg:prev>
                    <li class="page-item"><a class="page-link" href="${pageUrl}">上一页</a></li>
                </pg:prev>

                <pg:pages>
                    <c:choose>
                        <c:when test="${pageNumber eq currentPageNumber }">
                            <li class="page-item active"><a class="page-link" href="#">${pageNumber }</a></li>
                        </c:when>
                        <c:otherwise>
                            <li class="page-item"><a class="page-link" href="${pageUrl }">${pageNumber }</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </pg:pages>
                <pg:next>
                    <li class="page-item"><a class="page-link" href="${pageUrl}">下一页</a></li>
                </pg:next>
                <pg:last>
                    <li class="page-item"><a class="page-link" href="${pageUrl}">尾页</a></li>
                </pg:last>
            </pg:pager>
        </ul>
    </nav>
</div>


<jsp:include page="${ctx}/page/common/footer.jsp"/>

<jsp:include page="${ctx}/page/common/js.jsp"/>

<script type="text/javascript">
    $(function () {
        // 初始化tooltip
        $('[data-toggle="tooltip"]').tooltip();
    });

    function buy(productId) {
        if (!confirm('确定要购买吗?')) {
            return;
        }

        var data = {
            productId: productId,
            quantity: 1
        }
        $.post('${ctx}/orders', data, function (result) {
            if (result.success) {
                alert('购买成功,订单号是:' + result.data.id + ' 这里下一步应该跳转到订单页面');
            } else {
                alert(result.message);
            }
        });
    }
</script>
</body>
</html>
